<ng-container *ngIf="container">
  <ng-container [ngSwitch]="activeTab">
    <ng-container *ngSwitchCase="'compliance'">
      <div class="filter" [class.filter-csv]="!complianceEmpty">
        <div class="d-flex">
          <button
            *ngIf="!complianceEmpty"
            aria-label="Export compliance CSV"
            type="button"
            class="mr-3 d-flex align-items-center"
            (click)="complianceGrid.exportCSV()"
            mat-button>
            <i class="eos-icons mr-2">csv_file</i>CSV
          </button>
        </div>
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input [formControl]="filter" matInput />
        </mat-form-field>
      </div>
    </ng-container>
    <ng-container *ngSwitchCase="'vulnerabilities'">
      <div class="filter" [class]="'filter-icon-' + visibleIcons">
        <div class="d-flex">
          <ng-container *ngIf="isVulsAuthorized">
            <button
              *ngIf="
                isWriteVulsAuthorized &&
                selectedVulnerability &&
                !isAccepted(selectedVulnerability)
              "
              attr.aria-label="{{ 'cveProfile.ACCEPT_VUL' | translate }}"
              matTooltip="{{ 'cveProfile.ACCEPT_VUL' | translate }}"
              class="mr-3"
              (click)="onAcceptVulnerability(selectedVulnerability)"
              mat-icon-button>
              <mat-icon fontSet="fa" fontIcon="fa-check-square"></mat-icon>
            </button>
            <button
              type="button"
              [attr.aria-label]="acceptedVulsMsg"
              [matTooltip]="acceptedVulsMsg"
              class="mr-3"
              (click)="toggleAcceptedVuls()"
              mat-icon-button>
              <mat-icon
                fontSet="fa"
                [fontIcon]="
                  !showAcceptedVuls ? 'fa-eye' : 'fa-eye-slash'
                "></mat-icon>
            </button>
          </ng-container>
          <button
            *ngIf="!vulEmpty"
            aria-label="Export vulnerabilities CSV"
            type="button"
            class="mr-3"
            (click)="exportCVE()"
            mat-icon-button>
            <mat-icon class="eos-icons">csv_file</mat-icon>
          </button>
        </div>
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input [formControl]="filter" matInput />
        </mat-form-field>
      </div>
    </ng-container>
    <ng-container *ngSwitchCase="'process'">
      <div class="filter filter-icon-1">
        <div class="d-flex">
          <button
            mat-icon-button
            [attr.aria-label]="processHistoryMsg"
            [matTooltip]="processHistoryMsg"
            type="button"
            class="mr-3"
            (click)="toggleProcessHistory()">
            <mat-icon
              fontSet="fa"
              [fontIcon]="
                !showProcessHistory ? 'fa-eye' : 'fa-eye-slash'
              "></mat-icon>
          </button>
        </div>
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input [formControl]="filter" matInput />
        </mat-form-field>
      </div>
    </ng-container>
    <ng-container *ngSwitchDefault>
      <div class="filter" [style.visibility]="'hidden'">
        <mat-form-field appearance="standard">
          <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
          <input matInput disabled />
        </mat-form-field>
      </div>
    </ng-container>
  </ng-container>

  <mat-tab-group
    class="h-100 container-detail-tab-group"
    mat-align-tabs="start"
    (selectedTabChange)="activateTab($event)">
    <mat-tab>
      <ng-template mat-tab-label>
        <em class="fa fa-address-card pr-1"></em>
        {{ 'containers.detail.TAB_TITLE' | translate }}
      </ng-template>
      <ng-template matTabContent>
        <app-container-detail [container]="container"></app-container-detail>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <em class="fa fa-gavel pr-1"></em>
        {{ 'cis.tab.COMPLIANCE' | translate }}
      </ng-template>
      <ng-template matTabContent>
        <div class="mt-2" *ngIf="containerCompliance">
          <app-compliance-grid
            [path]="container.brief.name"
            [repository]="''"
            [dockerCisVersion]="containerCompliance.docker_cis_version"
            [kubernetesCisVersion]="containerCompliance.kubernetes_cis_version"
            [runAt]="containerCompliance.run_at"
            [rowData]="containerCompliance.items"
            [useQuickFilterService]="true"
            [isContainer]="true"
            [tableHeight]="gridHeight + 'px'">
          </app-compliance-grid>
        </div>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <em class="fa fa-bug pr-1"></em>
        {{ 'sidebar.nav.SCAN' | translate }}
      </ng-template>
      <ng-template matTabContent>
        <div class="mt-2" *ngIf="containerVuls">
          <app-vulnerabilities-grid
            (vulnerabilitySelected)="vulnerabilitySelected($event)"
            [rowData]="containerVuls"
            [useQuickFilterService]="true"
            [preselect]="false"
            [tableHeight]="gridHeight + 'px'"></app-vulnerabilities-grid>
        </div>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <em class="fa fa-terminal pr-1"></em>
        {{ 'containers.process.TAB_TITLE' | translate }}
      </ng-template>
      <ng-template matTabContent>
        <div class="mt-2" *ngIf="containerProcess">
          <app-process-grid
            [rowData]="containerProcess"
            [useQuickFilterService]="true"
            [tableHeight]="gridHeight + 'px'"></app-process-grid>
        </div>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <em class="fa fa-chart-line pr-1"></em>
        {{ 'containers.detail.TAB_STATS' | translate }}
      </ng-template>
      <ng-template matTabContent>
        <app-container-stats></app-container-stats>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
  <app-vulnerability-detail-dialog
    [vulnerability]="selectedVulnerability"></app-vulnerability-detail-dialog>
</ng-container>
